Skip to content

Implement learning progress tracker for tutorial series - #5048

Open
anshul23102 wants to merge 1 commit into
codeharborhub:mainfrom
anshul23102:feat/5023-progress-tracker
Open

Implement learning progress tracker for tutorial series#5048
anshul23102 wants to merge 1 commit into
codeharborhub:mainfrom
anshul23102:feat/5023-progress-tracker

Conversation

@anshul23102

@anshul23102 anshul23102 commented Jul 27, 2026

Copy link
Copy Markdown

Adds progress tracking component for monitoring learning progress through tutorial series with persistent storage.

Features:

  • ProgressTracker component with circular progress visualization
  • Progress statistics: completed lessons, remaining, estimated time
  • Expandable lesson list with individual completion toggles
  • localStorage persistence per course (seriesId)
  • Quick actions: Complete All, Reset progress
  • Celebration message on 100% completion
  • Progress-based encouragement messages
  • Time estimation algorithm based on lesson durations
  • Responsive mobile design
  • Progress callback for backend synchronization

Data Structure:

  • Stores completion status per lesson ID
  • Calculates estimated time from uncompleted lesson durations
  • Supports lesson duration and description metadata
  • Uses seriesId as localStorage key prefix

UI/UX:

  • Circular progress indicator with smooth animations
  • Collapsible lesson list for clean interface
  • Completion badges and strikethrough for finished lessons
  • Visual feedback on hover and completion states
  • Encouragement messages at progress milestones

Closes #5023

…rborhub#5023)

Add progress tracking component for tutorial series with persistent localStorage storage:
- ProgressTracker.jsx: React component tracking completion status per lesson
  - Circular progress indicator with percentage display
  - Statistics panel (completed, remaining, estimated time)
  - Expandable lesson list with toggle checkboxes
  - Quick actions: Complete All, Reset progress
  - Persistent storage to localStorage using seriesId key
  - Callback support for progress updates

- ProgressTracker.module.css: Professional styling with animations
  - Responsive grid layout for desktop/mobile
  - Circular progress visualization with SVG
  - Progress bar with gradient fill
  - Lesson item cards with hover states
  - Celebration message on completion
  - Encouragement messages based on progress level

- ProgressTrackerExample.mdx: Complete documentation
  - Usage examples with basic and advanced props
  - Props and lesson object structure reference
  - Customization and accessibility guide
  - Time estimation algorithm explanation
  - Storage management and browser compatibility

Features:
✓ Visual circular progress indicator (0-100%)
✓ Statistics: completed lessons, remaining, estimated time
✓ Per-lesson completion toggle with persistent storage
✓ Complete all / reset progress actions
✓ Collapsible lesson list for clean UI
✓ Automatic time estimation (0.5h per uncompleted lesson)
✓ Celebration message on 100% completion
✓ Progress-based encouragement messages
✓ Mobile responsive design
✓ Keyboard accessible controls
✓ localStorage persistence per seriesId
✓ Progress callback for backend sync
@gemini-code-assist

Copy link
Copy Markdown

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job, @anshul23102! 🎉 Thank you for submitting your pull request to CodeHarborHub. We appreciate your contribution and enthusiasm! Our team will review it soon. If you have any questions or need further assistance, feel free to reach out. Thanks for contributing!

@deepsource-io

deepsource-io Bot commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

DeepSource Code Review

We reviewed changes in d148591...1f66d7b on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Code Review Summary

Analyzer Status Updated (UTC) Details
JavaScript Jul 27, 2026 6:11p.m. Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

@github-actions

Copy link
Copy Markdown

⚡️ Lighthouse Report for the Deploy Preview of this PR 🚀

🔗 Site: CodeHarborHub | Live Site

URL 🌐 Performance Accessibility Best Practices SEO 📊
/ 🔴 34 🟡 77 🟡 75 🟢 100 📄
/docs 🟡 50 🟡 87 🟢 96 🟢 100 📄
/courses 🟡 53 🟡 86 🟢 96 🟢 100 📄
/showcase 🟡 51 🟡 87 🟡 75 🟡 86 📄
/community 🟡 55 🟡 86 🟢 96 🟢 100 📄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add learning progress tracker for tutorial series

1 participant